<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>4. 关节 joint | 被删的前端游乐场</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.1e2670bf.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.38d016d1.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.e3f029cb.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/79.bad08c1e.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link router-link-active">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link router-link-active">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>Angular框架解读</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>玩转 Angular</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>试试 Cycle.js</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>D3.js 和 Tree</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>试试 Three.js</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-2b653b36><span class="stand" data-v-2b653b36></span> <div class="cat" data-v-2b653b36><div class="body" data-v-2b653b36></div> <div class="head" data-v-2b653b36><div class="ear" data-v-2b653b36></div> <div class="ear" data-v-2b653b36></div></div> <div class="face" data-v-2b653b36><div class="nose" data-v-2b653b36></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div></div> <div class="tail-container" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>BOX2D.js 文档与教程</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-others/box2d-tutorial/1-0-basic-catalog.html" class="sidebar-link">1. 基本概念</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/2-0-world.html" class="sidebar-link">2. 物理世界</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html" class="sidebar-link">3. 形状 shape - 刚体 body</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html" aria-current="page" class="active sidebar-link">4. 关节 joint</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html#关节-joint" class="sidebar-link">关节(joint)</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html#距离关节-distance-joint" class="sidebar-link">距离关节(distance-joint)</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html#旋转关节-revolute-joint" class="sidebar-link">旋转关节(revolute-joint)</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html#移动关节-prismatic-joint" class="sidebar-link">移动关节(prismatic-joint)</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html#滑轮关节-pulley-joint" class="sidebar-link">滑轮关节(pulley-joint)</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html#齿轮关节-gear-joint" class="sidebar-link">齿轮关节(gear-joint)</a></li></ul></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/5-0-operation.html" class="sidebar-link">5. 操作 operation</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-1-create-and-init-world.html" class="sidebar-link">6-1. 创建世界并初始化</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-2-add-body.html" class="sidebar-link">6-2. 添加刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-3-add-bound.html" class="sidebar-link">6-3. 添加边界</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-4-mouse-operate-body.html" class="sidebar-link">6-4. 鼠标操作刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-5-handle-contact.html" class="sidebar-link">6-5. 处理碰撞刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/7-0-api.html" class="sidebar-link">7. api</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>第四章主要介绍关节(joint)。</p> <h2 id="关节-joint"><a href="#关节-joint" class="header-anchor">#</a> 关节(joint)</h2> <h3 id="关于"><a href="#关于" class="header-anchor">#</a> 关于</h3> <p>关节的作用是把物体约束到世界，或约束到其它物体上。在游戏中的典型例子是木偶，跷跷板和滑轮。关节可以用许多种不同的方法结合起来，创造出有趣的运动。</p> <p>有些关节提供了限制(limit)，以便你控制运动范围。有些关节还提供了马达(motor)，它可以以指定的速度驱动关节，直到你指定了更大的力或扭矩。</p> <p>关节马达有许多不同的用途。你可以使用关节来控制位置，只要提供一个与目标之距离成正比例的关节速度即可。你还可以模拟关节摩擦：将关节速度置零，并且提供一个小的、但有效的最大力或扭矩； 那么马达就会努力保持关节不动，直到负载变得过大。</p> <h3 id="关节定义"><a href="#关节定义" class="header-anchor">#</a> 关节定义</h3> <p>各种关节类型都派生自 b2JointDef。所有关节都连接两个不同的物体，可能其中一个是静态物体。如果你想浪费内存的话，那就创建一个连接两个静态物体的关节。</p> <p>你可以为任何一种关节指定用户数据。你还可以提供一个标记，用于预防相连的物体发生碰撞。实际上，这是默认行为，你可以设置 collideConnected 布尔值来允许相连的物体碰撞。</p> <p>很多关节定义需要你提供一些几何数据。一个关节常常需要一个锚点(anchor point)来定义，这是固 定于相接物体中的点。在 Box2D 中这些点需要在局部坐标系中指定，这样，即便当前物体的变化违反了关节约束，关节还是可以被指定——在游戏存取进度时这经常会发生。另外，有些关节定义需要默认的物体之间的相对角度。这样才能通过关节限制或固定的相对角来正确地约束旋转。</p> <p>初始化几何数据可能有些乏味。所以很多关节提供了初始化函数，消除了大部分工作。然而，这些初始化函数通常只应用于原型，在产品代码中应该直接地定义几何数据。这能使关节行为更加稳固。</p> <p>其余的关节定义数据依赖于关节的类型。</p> <h2 id="距离关节-distance-joint"><a href="#距离关节-distance-joint" class="header-anchor">#</a> 距离关节(distance-joint)</h2> <h3 id="说明"><a href="#说明" class="header-anchor">#</a> 说明</h3> <p>使用距离关节连接的两个物体上的选定的两个点之间的距离是常量，它限制了两个物体之间的距离，使它始终保持一个常量，就像自行车的两个轮子。</p> <h3 id="b2distancejointdef"><a href="#b2distancejointdef" class="header-anchor">#</a> b2DistanceJointDef</h3> <p>距离关节是最简单的关节之一，它描述了两个物体上的两个点之间的距离应该是常量。当你指定一个距离关节时，两个物体必须已在应有的位置上。
随后，你指定两个世界坐标中的锚点 。第一个锚点连接到物体 1，第二个锚点连接到物体 2。这些点隐含了距离约束的长度。</p> <p>首先创建两个物体，然后放到世界里，然后使用基类 b2DistanceJointDef 创建一个距离关节，连接它们。</p> <p>每个距离关节都有两个锚点，分别赋予两个物体上某一点的坐标，这样子就使用一个距离关节将两个物体的选定点连起来。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> Shape1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BoxDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个形状Shape1</span>
Shape1<span class="token punctuation">.</span>extents<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape1<span class="token punctuation">.</span>density <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
Shape1<span class="token punctuation">.</span>restitution <span class="token operator">=</span> <span class="token number">0.3</span><span class="token punctuation">;</span>
Shape1<span class="token punctuation">.</span>friction <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> BodyDef1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BodyDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//用Shape1创建一个物体BodyDef1</span>
BodyDef1<span class="token punctuation">.</span>position<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">490</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
BodyDef1<span class="token punctuation">.</span><span class="token function">AddShape</span><span class="token punctuation">(</span>Shape1<span class="token punctuation">)</span><span class="token punctuation">;</span>
Body1 <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateBody</span><span class="token punctuation">(</span>BodyDef1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将BodyDef1放到世界里</span>

<span class="token keyword">var</span> Shape2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BoxDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape2<span class="token punctuation">.</span>extents<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape2<span class="token punctuation">.</span>density <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
Shape2<span class="token punctuation">.</span>restitution <span class="token operator">=</span> <span class="token number">0.3</span><span class="token punctuation">;</span>
Shape2<span class="token punctuation">.</span>friction <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> BodyDef2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BodyDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
BodyDef2<span class="token punctuation">.</span>position<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">400</span><span class="token punctuation">,</span> <span class="token number">480</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
BodyDef2<span class="token punctuation">.</span><span class="token function">AddShape</span><span class="token punctuation">(</span>Shape2<span class="token punctuation">)</span><span class="token punctuation">;</span>
Body2 <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateBody</span><span class="token punctuation">(</span>BodyDef2<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> jointDefDistance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2DistanceJointDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个距离关节jointDefDistance</span>
jointDefDistance<span class="token punctuation">.</span>body1 <span class="token operator">=</span> Body1<span class="token punctuation">;</span> <span class="token comment">//该关节一端连在Body1上</span>
jointDefDistance<span class="token punctuation">.</span>body2 <span class="token operator">=</span> Body2<span class="token punctuation">;</span> <span class="token comment">//该关节另一端连在Body2上</span>
jointDefDistance<span class="token punctuation">.</span>anchorPoint1 <span class="token operator">=</span> Body1<span class="token punctuation">.</span><span class="token function">GetCenterPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//关节和Body1的连接锚点是Body1的中心位置</span>
jointDefDistance<span class="token punctuation">.</span>anchorPoint2 <span class="token operator">=</span> Body2<span class="token punctuation">.</span><span class="token function">GetCenterPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//关节和Body2的连接锚点是Body2的中心位置</span>
<span class="token keyword">var</span> jointDistance <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateJoint</span><span class="token punctuation">(</span>jointDefDistance<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将距离关节jointDefDistance放入到世界中</span>
</code></pre></div><h2 id="旋转关节-revolute-joint"><a href="#旋转关节-revolute-joint" class="header-anchor">#</a> 旋转关节(revolute-joint)</h2> <h3 id="说明-2"><a href="#说明-2" class="header-anchor">#</a> 说明</h3> <p>一个旋转关节会强制两个物体共享一个锚点，即铰接点。旋转关节只有一个自由度：两个物体的相对旋转。</p> <p>旋转关节即相当于将两个物体用钉子钉在一起，两个物体都可以绕这颗钉子旋转。当然，如果其中一个物体为地面的话，就相当于将物体钉在地面上，物体都可以绕这颗钉子旋转。</p> <h3 id="b2revolutejointdef"><a href="#b2revolutejointdef" class="header-anchor">#</a> b2RevoluteJointDef</h3> <p>首先创建两个物体，然后将它们放在世界里，使用基类 b2RevoluteJointDef 创建一个旋转关节，设定铰接点，及旋转关节连接的是哪两个物体之后即可将其放入到世界里。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> jointDefRevolute <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2RevoluteJointDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个旋转关节jointDefRevolute</span>
jointDefRevolute<span class="token punctuation">.</span>anchorPoint<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">450</span><span class="token punctuation">,</span> <span class="token number">450</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//设定铰接点坐标</span>
jointDefRevolute<span class="token punctuation">.</span>body1 <span class="token operator">=</span> Body1<span class="token punctuation">;</span> <span class="token comment">//设定旋转关节一端连接Body1</span>
jointDefRevolute<span class="token punctuation">.</span>body2 <span class="token operator">=</span> Body2<span class="token punctuation">;</span> <span class="token comment">//设定旋转关节另一端连接Body2</span>
<span class="token keyword">var</span> jointRevolute <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateJoint</span><span class="token punctuation">(</span>jointDefRevolute<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将旋转关节放入世界中</span>
jointRevolute<span class="token punctuation">.</span><span class="token function">SetMotorSpeed</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//设置旋转关节马达的速度</span>
</code></pre></div><h2 id="移动关节-prismatic-joint"><a href="#移动关节-prismatic-joint" class="header-anchor">#</a> 移动关节(prismatic-joint)</h2> <h3 id="说明-3"><a href="#说明-3" class="header-anchor">#</a> 说明</h3> <p>移动关节允许两个物体沿指定轴相对移动，它会阻止相对旋转，简而言之，就是关节对物体的影响只体现在轴向方向。因此，移动关节只有一个自由度。</p> <p>移动关节类似旋转关节，只是将旋转角度换成了平移。关节中的两个刚体的相对运动只能发生在其轴向上。</p> <h3 id="b2prismaticjointdef"><a href="#b2prismaticjointdef" class="header-anchor">#</a> b2PrismaticJointDef</h3> <p>首先创建两个物体，将其放入世界里，然后使用基类 b2PrismaticJointDef 创建一个移动关节，设置其各个参数，再将其放入到世界里即可。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> jointDefPrismatic <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2PrismaticJointDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个移动关节jointDefPrismatic</span>
jointDefPrismatic<span class="token punctuation">.</span>anchorPoint<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">700</span><span class="token punctuation">,</span> <span class="token number">565</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//一般选择两个锚点的中心点</span>
jointDefPrismatic<span class="token punctuation">.</span>axis<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//两物体只沿轴向方向有相对运动</span>
jointDefPrismatic<span class="token punctuation">.</span>body1 <span class="token operator">=</span> Body1<span class="token punctuation">;</span> <span class="token comment">//移动关节的一端连接到Body1上</span>
jointDefPrismatic<span class="token punctuation">.</span>body2 <span class="token operator">=</span> Body2<span class="token punctuation">;</span> <span class="token comment">//移动关节的另一端连接到Body2上</span>
<span class="token keyword">var</span> jointPrismatic <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateJoint</span><span class="token punctuation">(</span>jointDefPrismatic<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将设置好参数的移动关节放到世界里</span>
</code></pre></div><h2 id="滑轮关节-pulley-joint"><a href="#滑轮关节-pulley-joint" class="header-anchor">#</a> 滑轮关节(pulley-joint)</h2> <h3 id="说明-4"><a href="#说明-4" class="header-anchor">#</a> 说明</h3> <p>滑轮关节用于模拟定滑轮或动滑轮，即由滑轮关节连接的两个物体就像由绳子和滑轮连在一起一样。</p> <p>在此，简单介绍动滑轮的特点，使用动滑轮能省一半力，但是费距离。
这是因为使用动滑轮时，物体由两段绳子吊着，每段绳子只承担钩码重的一半。使用动滑轮虽然省了力，但是动力移动的距离是钩码升高的距离的 2 倍，即费了距离。</p> <p>一般可以简单地套用公式来计算 F 和 G 的关系：
<code>F=(G+G动滑轮）/n</code>
对于滑轮组，n 代表接在动滑轮上的绳子的段数，而比例系数 ratio 即是 n。</p> <h3 id="b2pulleyjointdef"><a href="#b2pulleyjointdef" class="header-anchor">#</a> b2PulleyJointDef</h3> <p>创建好物体之后，用基类 b2PulleyJointDef 创建一个滑轮关节，然后分别设置其连接的是哪两个物体及其锚点，连接绳子顶点，两物体绳子最大长度及比例系数等参数即可。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> jointDefPulley <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2PulleyJointDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个滑轮关节jointDefPulley</span>
jointDefPulley<span class="token punctuation">.</span>body1 <span class="token operator">=</span> Body1<span class="token punctuation">;</span> <span class="token comment">//滑轮关节的一端连接在Body1上</span>
jointDefPulley<span class="token punctuation">.</span>body2 <span class="token operator">=</span> Body2<span class="token punctuation">;</span> <span class="token comment">//滑轮关节的另一端连接在Body2上</span>
jointDefPulley<span class="token punctuation">.</span>anchorPoint1 <span class="token operator">=</span> Body1<span class="token punctuation">.</span><span class="token function">GetCenterPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//滑轮关节与Body1的连接点是Body1的中心位置</span>
jointDefPulley<span class="token punctuation">.</span>anchorPoint2 <span class="token operator">=</span> Body2<span class="token punctuation">.</span><span class="token function">GetCenterPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//滑轮关节与Body2的连接点是Body2的中心位置</span>
<span class="token keyword">var</span> groundPoint1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2Vec2</span><span class="token punctuation">(</span><span class="token number">850</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> groundPoint2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2Vec2</span><span class="token punctuation">(</span><span class="token number">950</span><span class="token punctuation">,</span> <span class="token number">365</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
jointDefPulley<span class="token punctuation">.</span>groundPoint1 <span class="token operator">=</span> groundPoint1<span class="token punctuation">;</span>
jointDefPulley<span class="token punctuation">.</span>groundPoint2 <span class="token operator">=</span> groundPoint2<span class="token punctuation">;</span> <span class="token comment">//用b2Vec2创建两个矢量，然后赋值给groundPoint，设定两段绳子的顶点</span>
jointDefPulley<span class="token punctuation">.</span>maxLength1 <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">;</span>
jointDefPulley<span class="token punctuation">.</span>maxLength2 <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span> <span class="token comment">//设定滑轮两侧的绳子的最大长度</span>
<span class="token comment">//这两个maxLength至少有一个要大于|groundPoint-anchorPoint|   jointDefPulley.ratio=1;</span>
<span class="token comment">//设定滑轮关节的比例系数，body1上下移动S，body2上下移动S/ratio，当ratio不等于1时，即模拟有动滑轮的情况</span>

<span class="token keyword">var</span> jointPulley <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateJoint</span><span class="token punctuation">(</span>jointDefPulley<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将滑轮关节放到世界内</span>
</code></pre></div><h2 id="齿轮关节-gear-joint"><a href="#齿轮关节-gear-joint" class="header-anchor">#</a> 齿轮关节(gear-joint)</h2> <h3 id="说明-5"><a href="#说明-5" class="header-anchor">#</a> 说明</h3> <p>齿轮关节需要两个被旋转关节或移动关节接地(ground)的物体，可以任意组合这些关节类型。</p> <h3 id="b2pulleyjointdef-2"><a href="#b2pulleyjointdef-2" class="header-anchor">#</a> b2PulleyJointDef</h3> <p>另外，创建旋转或移动关节时，Box2D 需要地(ground)作为 body1。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> Shape1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BoxDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//也可以是圆形或者多边形刚体</span>
Shape1<span class="token punctuation">.</span>extents<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape1<span class="token punctuation">.</span>density <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
Shape1<span class="token punctuation">.</span>restitution <span class="token operator">=</span> <span class="token number">0.3</span><span class="token punctuation">;</span>
Shape1<span class="token punctuation">.</span>friction <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> BodyDef1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BodyDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
BodyDef1<span class="token punctuation">.</span>position<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">950</span><span class="token punctuation">,</span> <span class="token number">450</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
BodyDef1<span class="token punctuation">.</span><span class="token function">AddShape</span><span class="token punctuation">(</span>Shape1<span class="token punctuation">)</span><span class="token punctuation">;</span>
Body1 <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateBody</span><span class="token punctuation">(</span>BodyDef1<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> jointDefRevolute <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2RevoluteJointDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个旋转关节</span>
jointDefRevolute<span class="token punctuation">.</span>anchorPoint<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">950</span><span class="token punctuation">,</span> <span class="token number">450</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
jointDefRevolute<span class="token punctuation">.</span>body1 <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">GetGroundBody</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//用作齿轮关节的旋转关节body1须为GroundBody</span>
jointDefRevolute<span class="token punctuation">.</span>body2 <span class="token operator">=</span> Body1<span class="token punctuation">;</span> <span class="token comment">//将旋转关节另外一个物体设为Body1</span>
<span class="token keyword">var</span> jointRevolute <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateJoint</span><span class="token punctuation">(</span>jointDefRevolute<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将旋转关节放入世界中</span>

<span class="token keyword">var</span> Shape2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BoxDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape2<span class="token punctuation">.</span>extents<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape2<span class="token punctuation">.</span>density <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
Shape2<span class="token punctuation">.</span>restitution <span class="token operator">=</span> <span class="token number">0.3</span><span class="token punctuation">;</span>
Shape2<span class="token punctuation">.</span>friction <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> BodyDef2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BodyDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
BodyDef2<span class="token punctuation">.</span>position<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">950</span><span class="token punctuation">,</span> <span class="token number">530</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
BodyDef2<span class="token punctuation">.</span><span class="token function">AddShape</span><span class="token punctuation">(</span>Shape2<span class="token punctuation">)</span><span class="token punctuation">;</span>
Body2 <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateBody</span><span class="token punctuation">(</span>BodyDef2<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> jointDefPrismatic <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2PrismaticJointDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个移动关节</span>
jointDefPrismatic<span class="token punctuation">.</span>anchorPoint<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">950</span><span class="token punctuation">,</span> <span class="token number">565</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
jointDefPrismatic<span class="token punctuation">.</span>axis<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//在齿轮关节中，这个轴只要设置成平行于屏幕就行，也就是说随着齿轮旋转，移动关节可以上下、左右来回运动，（斜向运动会出现bug）</span>
jointDefPrismatic<span class="token punctuation">.</span>body1 <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">GetGroundBody</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//用作移动关节的移动关节body1须为GroundBody</span>
jointDefPrismatic<span class="token punctuation">.</span>body2 <span class="token operator">=</span> Body2<span class="token punctuation">;</span> <span class="token comment">//移动关节的另外一个物体设置为Body2</span>
<span class="token keyword">var</span> jointPrismatic <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateJoint</span><span class="token punctuation">(</span>jointDefPrismatic<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将移动关节放入到世界中</span>

<span class="token keyword">var</span> jointDefGear <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2GearJointDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//使用基类b2GearJointDef创建一个齿轮关节</span>
jointDefGear<span class="token punctuation">.</span>body1 <span class="token operator">=</span> Body1<span class="token punctuation">;</span>
jointDefGear<span class="token punctuation">.</span>body2 <span class="token operator">=</span> Body2<span class="token punctuation">;</span> <span class="token comment">//设置齿轮关节连接的两个物体分别是Body1和Body2</span>
jointDefGear<span class="token punctuation">.</span>joint1 <span class="token operator">=</span> jointRevolute<span class="token punctuation">;</span>
jointDefGear<span class="token punctuation">.</span>joint2 <span class="token operator">=</span> jointPrismatic<span class="token punctuation">;</span>
<span class="token keyword">var</span> jointGear <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateJoint</span><span class="token punctuation">(</span>jointDefGear<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将齿轮关节放入到世界中</span>
jointGear<span class="token punctuation">.</span>m_ratio <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//设定比例系数，ratio=转动圈数/移动距离</span>
</code></pre></div></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-others/box2d-tutorial/4-0-joint.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html" class="prev">
          3. 形状 shape - 刚体 body
        </a></span> <span class="next"><a href="/front-end-playground/front-end-others/box2d-tutorial/5-0-operation.html">
          5. 操作 operation
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-5042" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty2.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.1e2670bf.js" defer></script><script src="/front-end-playground/assets/js/2.38d016d1.js" defer></script><script src="/front-end-playground/assets/js/3.e3f029cb.js" defer></script><script src="/front-end-playground/assets/js/79.bad08c1e.js" defer></script>
  </body>
</html>
